<template>
  <page-wrap>
    <div class="details-container">
      <div style="padding: 12px; background: #17171a">
        <div class="statistics-container-consumeCode">台单号：{{ route.query.consumeCode }}</div>
        <div class="statistics-container-summary" v-if="info.summaryData">
          <div class="statistics-summary-upper">
            <div class="upper-value">{{ formatNumber(info.summaryData.totalAmt) }}</div>
            <div class="upper-title">总金额</div>
          </div>
          <div class="statistics-summary-below">
            <div class="summary-below-item">
              <div class="summary-below-value">{{ formatNumber(info.summaryData.payAmt) }}</div>
              <div class="summary-below-title">已付款</div>
              <div class="summary-below-line"></div>
            </div>
            <div class="summary-below-item">
              <div class="summary-below-value">{{ formatNumber(info.summaryData.unPayAmt) }}</div>
              <div class="summary-below-title">未付款</div>
              <div class="summary-below-line"></div>
            </div>
            <div class="summary-below-item">
              <div class="summary-below-value">{{ formatNumber(info.summaryData.refundAmt) }}</div>
              <div class="summary-below-title">退款金额</div>
            </div>
          </div>
        </div>
      </div>

      <div class="details-container-header">
        <div
          class="header-item"
          v-for="(item, index) in info.payTypeData"
          :key="index"
        >
          <span>{{ item.payName }}：</span>
          <span class="header-item-value">{{ item.payAmt }}</span
          >&nbsp;&nbsp;
        </div>
      </div>
      <div class="details-container-main">
        <div v-for="(v,k) in info.orderData" :key="k" class="main-item">
          <div class="details-container-all">
          <div class="container-all-title">结账单号:{{ v.payBatchCode }}</div>
          <div class="container-all-value" >{{ formatNumber(v.totalAmt) }}</div>
        </div>
        <div class="details-container-tips" v-if="info.summaryData.unPayAmt">
          <div class="tips-title">剩余未付金额：</div>
          <div class="tips-value">{{ formatNumber(info.summaryData.unPayAmt) }}</div>
        </div>
        <div class="details-container-product">
          <div class="product-title">
            <div class="product-title-left">商品信息</div>
            <div class="product-title-right" @click="retract(k)">
              <div class="right-value">{{ v.isProductShow?'展开':'收起' }}</div>
              <!-- <img :src="v_triangle" class="package-img-icon" /> -->
              <img
                :src="v_triangle"
                class="package-img-icon"
                :class="{
                  overturn: !v.isProductShow
                }"
              />
            </div>
          </div>
          <div class="container-main-height" :class="{ isShow: v.isProductShow }">
            <!-- :class="{ isShow: showAllGoodsInfo }" -->
            <div class="container-main-content" >
              
              <div class="main-content-title">
                <div class="title-time">
                  下单时间
                  {{ dayjs(v.orderTime).format('YYYY-MM-DD') }}
                    {{ dayjs(v.orderTime).format('HH:mm:ss') }}
                </div>
              </div>
              <div
                  class="main-content-item"
                  v-for="(vi, ki) in v.orderGoods"
                  :key="ki"
                >
                  <div v-if="!vi.subGoods.length">
                    <div class="content-item-name">
                      {{ vi.goodsName }}
                    </div>
                    <div class="content-item-value">
                      <div class="item-value-specifications">
                        规格：{{ vi.uomName }}
                      </div>
                      <div class="item-value-num">×{{ vi.orderQty }}</div>
                      <div class="item-value-price">
                        ￥{{ formatNumber(vi.totalAmt) }}
                      </div>
                    </div>
                  </div>
                </div>
              <div>
                <van-collapse
                    v-model="activeNames"
                    class="main-content-package"
                    :accordion="false"
                    :is-link="false"
                    v-for="(packageItem, packageIndex) in v.orderGoods"
                    :key="packageIndex"
                  >
                    <van-collapse-item
                      :name="packageItem.goodsCode + packageIndex"
                      @click="toggleActive(k, packageIndex)"
                      v-if="packageItem.subGoods.length"
                    >
                      <template v-slot:title>
                        <div class="package-header">
                          <div class="package-header-title">
                            {{ packageItem.goodsName }}
                          </div>
                          <img
                            :src="customIcon"
                            class="package-img-icon"
                            :class="{
                              overturn: packageItem.IsShow
                            }"
                          />
                        </div>
                        <div class="package-main">
                          <div class="package-main-num">
                            数量：{{ packageItem.orderQty }}
                          </div>
                          <div class="package-main-price">
                            ￥{{ formatNumber(packageItem.totalAmt) }}
                          </div>
                        </div>
                      </template>
                      <template v-slot:default>
                        <div
                          class="package-footer"
                          v-for="(
                            packageGoods, packageGoodsInex
                          ) in packageItem.subGoods"
                          :key="packageGoodsInex"
                          @click.stop=""
                        >
                          <div class="package-footer-name">
                            {{ packageGoods.goodsName }}
                          </div>
                          <div class="package-footer-value">
                            <div class="package-specifications">
                              规格：{{ packageGoods.standard }}
                            </div>
                            <div class="package-num">
                              ×{{ packageGoods.orderQty }}
                            </div>
                            <div class="package-price">
                              ￥{{ formatNumber(packageGoods.totalAmt) }}
                            </div>
                          </div>
                        </div>
                      </template>
                    </van-collapse-item>
                  </van-collapse>
              </div>
            </div>
          </div>
        </div>
        <div class="details-container-pay">
          <div class="pay-title">
            <div class="pay-title-left">支付信息
              <!-- &nbsp;<span style="color: #ff3333;font-size: 12px;" v-if="!isPayAll">(订单未全额支付)</span> -->
            </div>
          </div>
          <div class="container-main-height">
           
            <div class="container-main-content" v-for="(vi, ki) in v.orderPayInfos"
                  :key="ki">
              
              <div class="main-content-title">
                <div class="title-time">
                  支付流水号：{{ vi.itemCode}}
                </div>
                <div class="title-totalAmt">
                  {{ vi.payAmt }}
                </div>
              </div>
              <ul class="main-content-item">
                <li class="pay-item-li">
                  <div class="li-left">收银员：</div>
                  <div class="li-right">{{ vi.cashUser }}</div>
                </li>
                <li class="pay-item-li">
                  <div class="li-left">支付方式：</div>
                  <div class="li-right">{{ vi.payName }}</div>
                </li>
                <!-- <li class="pay-item-li">
                  <div class="li-left">优惠金额：</div>
                  <div class="li-right">{{ vi.smallChange }}</div>
                </li> -->
                <li class="pay-item-li">
                  <div class="li-left">支付时间：</div>
                  <div class="li-right">{{ dayjs(vi.payTime).format('YYYY-MM-DD') }}
                    {{ dayjs(vi.payTime).format('HH:mm:ss') }}</div>
                </li>
              </ul>
            </div>
          </div>
        </div>
        </div>
        
        <!-- <div class="details-main-total">
          <div
            class="details-main-item"
            v-for="(v, k) in info.payDetails"
            :key="k"
          >
            <div class="item-upper">
              <div class="item-name">{{ v.goodsName }}</div>
              <div class="item-price">{{ v.totalAmt }}</div>
            </div>
            <div
              class="item-below"
              :class="{ active: k === info.payDetails.length - 1 }"
            >
              <div class="item-num">数量：{{ v.orderQty }}</div>
              <div class="item-method">
                {{ v.payTypeName }}
              </div>
              <div class="item-paid" v-if="v.payTypeName === '未支付'">
                未支付
              </div>
            </div>
          </div>
        </div> -->
      </div>
    </div>
  </page-wrap>
</template>

<script setup>
const route = useRoute()
import dayjs from 'dayjs'
import Api from '@/api'
import v_triangle from '@/assets/svg/details/v_details-triangle.svg'
// 模拟数据
const info = ref({})
onMounted(() => {
  // 根据传递的房间号改标题
  const targetElement = document.querySelector('.z-page-header-title')
  console.log(route.query)
  targetElement.innerHTML = route.query.roomName
})
const isPayAll = computed(() => {
      const sum = info.value.orderData[0].orderPayInfos.reduce((accumulator, item) => accumulator + parseFloat(item.payRealAmt), 0);
      console.log(sum);
      return sum >= info.value.orderData[0].totalAmt;
});
//---------------------------------------------------------------------------保留两位小数--------------------------------------------------
function formatNumber (num) {
  if (num) {
    return parseFloat(num).toFixed(2);
  } else {
    return 0
  }
}
//--------------------------------------套餐折叠-----------------------------------------------
const activeNames = ref(['']) // 当前展开面板的 name

const customIcon = ref(v_triangle)
// 翻转三角按钮
const toggleActive = (k, packageIndex) => {
 
  info.value.orderData[k].orderGoods[packageIndex].IsShow =
    !info.value.orderData[k].orderGoods[packageIndex].IsShow
}

// 收起
const retract = (k)=>{

  info.value.orderData[k].isProductShow = !info.value.orderData[k].isProductShow
  

}
// -----------------------------------------------------初始化------------------------------------------------------
const onInit = function () {
  Api.Common.AppObjProcess.Do({
    functionName: 'getCashierDetail',
    contentData: { consumeCode: route.query.consumeCode }
  }).then(res => {
    res.orderData.forEach(item => {
      if (item.orderGoods) {
        item.orderGoods = item.orderGoods.map(obj => {
          return { ...obj, IsShow: false }
        })
      }
    })
    res.orderData = res.orderData.map(obj => {
          return { ...obj, isProductShow: false }
        })
    info.value = res
    console.log(info.value);
  })
}
onInit()
</script>

<style scoped lang="scss">
.details-container {
  .statistics-container-consumeCode{
    font-family: PingFang SC;
    font-weight: 500;
    font-size: 13px;
    color: #FFFFFF;
    line-height: 13px;
    padding-bottom: 10px;
  }
  .statistics-container-summary {
    background: #28282e80;
    box-shadow: inset 0 0 20px rgba(63, 61, 66, 0.5);
    border-radius: 8px;
    padding: 20px 12px;
    .statistics-summary-upper {
      text-align: center;
      position: relative;
      padding-bottom: 20px;
      border-bottom: 1px solid #383840;
      .upper-value {
        font-family: PingFang SC;
        font-weight: bold;
        font-size: 22px;
        line-height: 22px;
        color: #ffaa00;
        padding-bottom: 13px;
      }
      .upper-title {
        line-height: 13px;
        font-family: PingFang SC;
        font-weight: 500;
        font-size: 13px;
        color: #cccccc;
      }
      .summary-upper-left {
        text-align: center;
      }
      .summary-upper-right {
        text-align: center;
      }
      .summary-upper-center {
        position: absolute;
        width: 1px;
        height: 20px;
        right: 50%;
        top: 2px;
        background-image: url('@/assets/images/statistics/i_statistics_line.png');
        background-repeat: no-repeat;
        background-position: center center;
        background-size: 100%;
      }
      .summary-upper-value {
        line-height: 22px;
        font-size: 22px;
        font-family: PingFang SC;
        font-weight: bold;
        color: #ffaa00;
        padding-bottom: 13px;
      }
      .summary-upper-title {
        line-height: 13px;
        font-size: 13px;
        font-family: PingFang SC;
        font-weight: 500;
        color: #cccccc;
      }
    }
    .statistics-summary-below {
      display: flex;
      align-items: center;
      justify-content: space-between;
      .summary-below-item {
        flex-basis: 33.33%;
        text-align: center;
        position: relative;
        .summary-below-line {
          position: absolute;
          width: 1px;
          height: 40px;
          right: 0px;
          top: 12px;
          background-image: url('@/assets/images/common/i_onwine-line.png');
          background-repeat: no-repeat;
          background-position: center center;
          background-size: cover;
        }
      }

      .summary-below-value {
        line-height: 14px;
        font-size: 14px;
        font-family: PingFang SC;
        font-weight: bold;
        color: #ffffff;
        padding: 14px 0 12px;
      }
      .summary-below-title {
        line-height: 12px;
        font-size: 12px;
        font-family: PingFang SC;
        font-weight: 500;
        color: #cccccc;
      }
    }
  }
  .details-container-header {
    line-height: 12px;
    font-size: 12px;
    font-family: PingFang SC;
    font-weight: 500;
    padding: 0 12px 20px;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    color: #999999;
    background: #17171a;

    .header-item {
      padding-bottom: 10px;
    }
    .header-item-value {
      // color: #ffaa00;
    }
  }
  .details-container-main {
    .main-item{
      border-top: 1px dashed #fafafa;
      padding: 19px 12px;
      .details-container-all {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding-bottom: 18px;
      border-bottom: 1px solid #383840;
      .container-all-title {
        font-family: PingFang SC;
        font-weight: 500;
        font-size: 14px;
        color: #ffffff;
        line-height: 14px;
      }
      .container-all-value {
        font-family: PingFang SC;
        font-weight: 500;
        font-size: 18px;
        color: #ffaa00;
        line-height: 18px;
        &.turnRed{
            color: #FF3333;
          }
      }
    }
    .details-container-tips{
      display: flex;
      align-items: center;
      justify-content: flex-end;
      padding-top: 8px;
      .tips-title{
        font-family: PingFang SC;
        font-weight: 500;
        font-size: 12px;
        color: #999999;
        line-height: 12px;
      }
      .tips-value{
        font-family: PingFang SC;
        font-weight: 500;
        font-size: 12px;
        color: #FF3333;
        line-height: 12px;

      }
    }
    .details-container-product {
      .product-title {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 30px 0 20px;
        .product-title-left {
          font-family: PingFang SC;
          font-weight: bold;
          font-size: 18px;
          color: #ffffff;
          line-height: 18px;
        }
        .product-title-right {
          display: flex;
          align-items: center;
          .right-value {
            font-family: PingFang SC;
            font-weight: 500;
            font-size: 14px;
            color: #cccccc;
            line-height: 14px;
          }
          .package-img-icon {
            width: 16px;
            height: 16px;
            margin-left: 6px;
            &.overturn {
              transform: rotate(180deg);
            }
          }
        }
      }
      .container-main-height {
        background: #28282e;
        border-radius: 8px;
        max-height: 2000px;
        overflow: hidden;
        transition: max-height 2s ease;
        will-change: max-height;
        max-height: 100%;
        // overflow: hidden;
        transition: .1s;
        &.isShow {
          max-height: 0 !important;
        }
        .container-main-content {
          background: #28282e;
          .main-content-title {
            display: flex;
            justify-content: space-between;
            font-size: 12px;
            font-family: PingFang SC;
            font-weight: 500;
            color: #cccccc;
            line-height: 12px;
           
            .title-time {
              padding: 20px 0 23px 12px;
            }
            .title-oderNum {
              padding: 20px 13px 23px 0px;
            }
          }
          .main-content-item {
            .content-item-name {
              padding: 0 0 12px 22px;
              font-size: 16px;
              color: #ffffff;
              line-height: 16px;
            }
            .content-item-value {
              display: flex;
              flex-wrap: wrap;
              padding: 0 34px 20px 34px;
              div {
                font-size: 14px;
                flex-basis: 33.33%;
                font-family: PingFang SC;
                font-weight: 500;
                color: #cccccc;
                line-height: 14px;
              }
              .item-value-specifications {
                // margin-left: 34px;
              }
              .item-value-num {
                text-align: center;
              }
              .item-value-price {
                color: #ffffff;
                text-align: right;
              }
            }
          }
          .main-content-package {
            .package-header {
              display: flex;
              font-size: 16px;
              font-family: PingFang SC;
              font-weight: 500;
              color: #ffffff;
              line-height: 16px;
              .package-img-icon {
                width: 16px;
                height: 16px;
                margin-left: 8px;
                &.overturn {
                  transform: rotate(180deg);
                }
              }

              &-title {
                padding: 0 0 14px 22px;
              }
            }
            .package-main {
              display: flex;
              justify-content: space-between;
              padding: 0 34px 30px 34px;
              font-size: 14px;
              font-family: PingFang SC;
              font-weight: 500;
              line-height: 14px;
              &-num {
                color: #cccccc;
              }
              &-price {
                color: #ffffff;
              }
            }

            .package-footer {
              .package-footer-name {
                padding: 0 0 12px 34px;
                font-size: 16px;
                font-family: PingFang SC;
                font-weight: 500;
                color: #ffffff;
                line-height: 16px;
              }
              .package-footer-value {
                display: flex;
                flex-wrap: wrap;
                padding: 0 34px 20px 46px;
                div {
                  font-size: 14px;
                  flex-basis: 33.33%;
                  font-family: PingFang SC;
                  font-weight: 500;
                  color: #cccccc;
                  line-height: 14px;
                }
                .package-specifications {
                }
                .package-num {
                  text-align: center;
                  flex-basis: calc(33.33% - 12px);
                }
                .package-price {
                  color: #cccccc;
                  text-align: right;
                  flex-basis: calc(33.33% + 12px);
                }
              }
            }
          }
          .main-content-footer {
            display: flex;
            justify-content: space-between;
            align-content: center;
            font-family: PingFang SC;
            font-weight: 500;
            margin: 0 12px 0 12px;
            border-bottom: 1px solid #383840;
            .footer-order {
              padding: 4px 8px 4px 8px;
              font-size: 13px;
              color: #cccccc;
              line-height: 13px;
              background: #45454d;
              border-radius: 2px;
              margin-bottom: 20px;
            }
            .footer-right {
              display: flex;
              margin-bottom: 22px;
              // align-content:flex-end;

              &-all {
                font-size: 12px;
                color: #cccccc;
                line-height: 12px;
                align-self: flex-end;
              }
              &-value {
                font-size: 18px;
                color: #ffaa00;
                line-height: 18px;
                align-self: flex-end;
              }
            }
          }
        }
      }
    }

    .details-container-pay {
      padding-top: 10px;
      .pay-title {
        padding: 20px 0;
        font-family: PingFang SC;
        font-weight: bold;
        font-size: 18px;
        color: #ffffff;
        line-height: 18px;
      }
      .container-main-height {
        background: #17171A;
        border-radius: 8px;
        max-height: 2000px;
        overflow: hidden;
        transition: max-height 2s ease;
        will-change: max-height;
        margin-bottom: 10px;
        &.isShow {
          max-height: 100%;
        }
        .container-main-content {
          background: #28282e;
          margin-bottom: 10px;
          .main-content-title {
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-size: 12px;
            font-family: PingFang SC;
            font-weight: 500;
            color: #cccccc;
            line-height: 12px;
            margin: 0 12px;
             border-bottom: 1px solid #383840;
             padding: 18px 0 18px 0px;
            .title-time {
              
            }
            .title-totalAmt {
             
              font-family: PingFang SC;
              font-weight: 500;
              font-size: 18px;
              color: #FFFFFF;
              line-height: 18px;
            }
          }
          .main-content-item{
            padding: 12px 20px 8px;
            .pay-item-li{
              display: flex;
              align-items: center;
              justify-content: flex-start;
              font-family: PingFang SC;
              font-weight: 500;
              font-size: 14px;
              line-height: 14px;
              padding-bottom: 12px;
              .li-left{
                color: #CCCCCC;
              }
              .li-right{
                color: #FFFFFF;
              }
            }
          }
        }
      }
    }
    .details-main-total {
      background: #28282e;
      border-radius: 8px;
    }
    .details-main-item {
      padding: 16px 12px 0px;

      .item-upper {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding-bottom: 16px;
        .item-name {
          width: 206px;
          font-size: 16px;
          font-family: PingFang SC;
          font-weight: 500;
          color: #cccccc;
          line-height: 16px;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }
        .item-price {
          font-size: 16px;
          font-family: PingFang SC;
          font-weight: bold;
          color: #ffffff;
          line-height: 16px;
        }
      }
      .item-below {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding-bottom: 16px;
        border-bottom: 1px solid #383840;
        &.active {
          border: none;
        }
        .item-num {
          font-size: 13px;
          font-family: PingFang SC;
          font-weight: 500;
          color: #999999;
          line-height: 13px;
        }
        .item-method {
          font-size: 13px;
          font-family: PingFang SC;
          font-weight: 500;
          color: #cccccc;
          line-height: 13px;
        }
        .item-paid {
          font-size: 13px;
          font-family: PingFang SC;
          font-weight: 500;
          color: #ff3333;
          line-height: 13px;
        }
      }
    }
    }
    
  }
  .details-container-footer {
    width: 100%;
    background: #222226;
    position: fixed;
    bottom: 0px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 13px 12px;
    .details-footer-left {
      font-size: 16px;
      font-family: PingFang SC;
      font-weight: 500;
      line-height: 16px;
      .allprice-title {
        color: #cccccc;
      }
      .allprice-value {
        color: #ffaa00;
      }
    }
    .details-footer-right {
      flex-basis: 50%;
      font-size: 13px;
      font-family: PingFang SC;
      font-weight: 500;
      line-height: 13px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      .footer-right-title {
        color: #cccccc;
      }
      .footer-right-value {
        color: #ff3333;
      }
    }
  }
  ::v-deep(.van-cell) {
  padding: 0;
}
::v-deep(.van-cell--clickable) {
  background: #28282e;
}
::v-deep(.van-cell__right-icon) {
  display: none;
}
::v-deep(.van-hairline--top-bottom:after, .van-hairline-unset--top-bottom:after) {
  border: none;
}
::v-deep(.van-collapse-item__content) {
  padding: 0;
  background: #28282e;
}
::v-deep(.van-collapse-item__title--expanded:after) {
  border: none;
}
::v-deep(.van-icon__image) {
  width: 20px;
  height: 20px;
}
::v-deep(.van-icon__image.clicked) {
  transform: rotate(180deg);
}
}
</style>
